import React from 'react'
import {Row,Col,Form,Input,Button,Icon} from 'antd'
import styles from './networkInform.css'
import Avatar from '../upload'
import {connect} from 'dva'
import SectionToChinese from '../../utils/NumberChinese'
const {TextArea} = Input;
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    }
};

class NetworkDetail extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            dataSource:0,
            categoryList:[{
                'chapter':'',
                'stepList':[{
                    'stepName':''
                }]
            }],
            
        }
    }
    componentWillMount(){
        this.chapterCount();
    }
    chapterCount =()=>{
        const {chapterData,title} = this.props;
        if(title === '型号详情'){
            const categoryList = [];
            for (let i = 0; i < chapterData ? chapterData.length : 0; i++){
                categoryList.push({
                    'chapter': '',
                    'stepList': [{
                        'stepName': ''
                    }]
                })
            }
            this.setState({
                    categoryList:categoryList
                    
            })
        }else if(title==='新增型号'){
            return ;
        }
        
    }
    //更新状态
    updateState =()=>{
        this.setState(
            {
                categoryList:this.state.categoryList
            }
        )
    }

    //添加章节
    addCategroy =()=>{
        const {dataSource} = this.state;
        this.setState({
            dataSource: dataSource+1,
            categoryList:[
                ...this.state.categoryList,
            {
                'chapter': '',
                'stepList':[{
                    'stepName':''
                }]
            }],
        })
    }
    //删除章节
    deleteCategory =(index)=>{
        const { dataSource } = this.state;
        if (dataSource > 0){
           this.setState({
                dataSource:dataSource-1
            }) 
        }else{
            return 
        }  
        if(this.state.categoryList.length>1){
            this.state.categoryList.splice(index,1);
            this.updateState();
        }else{
            return;
        }
        
    }
    //添加步骤
    addStep =(index)=> {
        this.state.categoryList[index].stepList = [
            ...this.state.categoryList[index].stepList,
            {
                'stepName': ''
            }
        ]
        this.updateState();
    }
    //删除步骤
    deleteStep =(index,number)=>{
        if(this.state.categoryList[index].stepList.length > 1){
            this.state.categoryList[index].stepList.splice(number,1);
            this.updateState();
        }else{
            return;
        }
        
    }
    render(){
        const { form, chapterData,modelList } = this.props;
        const { getFieldDecorator } = form;
        const {categoryList,dataSource} = this.state;
        return (
            <div>
                {
                    categoryList.map((item,index) => {
                        const categoryNumber = SectionToChinese(index+1);
                        const categroyName = 'chapter'+index.toString();
                        return (
                            <Form key={index}>
                                <FormItem label={(
                                    <span>
                                        <Icon type="delete" theme="outlined" className={styles.delete} onClick={()=>this.deleteCategory(index)}/>
                                        &nbsp;{`${'章节'}${categoryNumber}`}
                                    </span>
                                )} {...formItemLayout}>
                                {getFieldDecorator(categroyName, {
                                    initialValue:chapterData ? chapterData[index].chapter : ''
                                })(
                                    <Input placeholder="请输入章节名称" className={styles.input}/>
                                )}
                                {
                                    dataSource == index ? <Button type="primary" className={styles.button} onClick={this.addCategroy}>添加章节</Button> : ''
                                }
                                </FormItem>   
                                {
                                    item.stepList.map((step,number)=>{
                                        const stepNumber = SectionToChinese(number+1)
                                        const pictureName = 'qwer'+ index.toString()+number.toString();
                                        const textAreaName = 'textName' + index.toString() + number.toString();
                                        const inputName = 'input' + index.toString() + number.toString();
                                        const buttonName = 'button' + index.toString() + number.toString();
                                        return (
                                            <Row key={number}>
                                                <FormItem label={(
                                                    <span>
                                                        <Icon type="delete" theme="outlined" className={styles.delete} onClick={()=>this.deleteStep(index,number)}/>
                                                        &nbsp;{`${'步骤'}${stepNumber}`}
                                                    </span>
                                                )} {...formItemLayout}>
                                                    {getFieldDecorator(pictureName, {
                                                        initialValue: chapterData ? chapterData[index].stepVibList[number].picUrl : ''
                                                    })(
                                                        <Avatar avatarName='配网图片' imgPhoto={chapterData ? chapterData[index].stepVibList[number].picUrl : ''}/>
                                                    )}
                                                </FormItem>
                                                <FormItem label=" " {...formItemLayout} colon={false}>
                                                    {getFieldDecorator(textAreaName, {
                                                        initialValue: chapterData ? chapterData[index].stepVibList[number].htmlCode:''
                                                    })(
                                                        <TextArea placeholder='请输入配网描述'/>
                                                    )}
                                                </FormItem>
                                                <FormItem label=" " {...formItemLayout} colon={false}>
                                                    {getFieldDecorator(inputName, {
                                                        initialValue:chapterData ? chapterData[index].stepVibList[number].checkbox : ''
                                                    })(
                                                        <Input placeholder="请输入复选框文字" className={styles.input}/>
                                                    )}
                                                </FormItem>
                                                <FormItem label=" " {...formItemLayout} colon={false}>
                                                    {getFieldDecorator(buttonName, {
                                                        initialValue:chapterData ? chapterData[index].stepVibList[number].button : ''
                                                    })(
                                                        <Input placeholder="请输入按钮文字" className={styles.input}/>
                                                    )}
                                                </FormItem>
                                            </Row>
                                        )
                                    })
                                }
                                <FormItem label=" " {...formItemLayout} colon={false}>
                                    {getFieldDecorator('7', {
                                    })(
                                        <Button type="primary" className={styles.netWork} onClick={()=>this.addStep(index)}>添加步骤</Button>
                                    )}
                                </FormItem>
                            </Form>
                        )
                        
                    })
                }
                
            </div>
        )
    }
}
export default Form.create(connect(({ modelList }) => ({ modelList }))(NetworkDetail))